<template>
  <div>
    <el-form ref="giftForm" size="small" :model="entity" :rules="rules" label-width="120px">
      <el-form-item label="礼品名称" prop="name">
        <el-input v-model="entity.name" placeholder="礼品名称" />
      </el-form-item>
      <el-form-item label="礼品分类" prop="typename">
        <el-input v-model="entity.typename"  placeholder="礼品分类"  @click.native="getTree"></el-input>
        <el-tree ref="typetree" :data="typeTreeData" node-key=id  default-expand-all @node-click="handleNodeClick" v-show="closeTree"></el-tree>
        <span style="color: #f56c6c;font-size: 10px" v-show="!entity.typename">请选择礼品分类</span>
      </el-form-item>
      <el-form-item label="礼品规格" prop="guige">
        <el-input v-model="entity.guige" placeholder="礼品规格" />
      </el-form-item>
      <el-form-item label="品牌" prop="pinpai">
        <el-input v-model="entity.pinpai" placeholder="品牌" />
      </el-form-item>
      <el-form-item label="礼品描述" prop="descption">
        <el-input type="textarea" v-model="entity.descption" placeholder="礼品描述" />
      </el-form-item>
      <el-form-item style="text-align: center">
        <el-button type="primary" @click="onSubmit">确定</el-button>
        <el-button type="warning" @click="modelTongBu(entity.id)" v-show="entity.id">礼品模版同步</el-button>
      </el-form-item>
    </el-form>
    <el-dialog title="礼品选择" :visible.sync="giftModelVisible" append-to-body :close-on-click-modal="false" width="1360">
      <GiftSelect v-if="giftModelVisible" :visible.sync="giftModelVisible" @selected="giftSelected"></GiftSelect>
    </el-dialog>
    <div v-show="entity.id" class="giftmodel">
      <el-divider content-position="center">礼品模版</el-divider>
      <ImageUpload :entityId="entity.id" :entityTypeId="FileEntityType.giftmodel"  :key="ImageUploadId"></ImageUpload>
    </div>
  </div>
</template>

<script>
import request from '@/utils/request'
import FileEntityType from "../../../utils/FileEntityType";
import GiftSelect from "../GiftSelect";
import {random} from "@/utils";
export default {
  components: {GiftSelect},
  props:{
    entityId : {type : Number, default: 0},
  },
  data() {
    return {
      ImageUploadId : random(1, 100000).toString(),
      FileEntityType : FileEntityType,
      typeTreeData:[],
      closeTree: false,

      giftModelVisible : false,

      entity: {
        id : this.entityId,
        typeId: 0,
        typename:'',
        name: '',
        guige:'',
        pinpai:'',
        descption:'',
      },
      rules: {
        name: [
          { required: true, message: '请输入礼品名称', trigger: 'blur' },
          { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
        ],
        guige: [
          { required: true, message: '请输入礼品规格', trigger: 'blur' },
          { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  mounted() {
    this.loadGiftTypeTree();
    this.loadEntity();
  },
  methods: {
    handleNodeClick(treeNode){
      this.entity.typename = treeNode.label; // 前端显示中文
      this.entity.typeId = parseInt(treeNode.id); // 传后台值为对应 id
      this.closeTree = !this.closeTree;
    },
    // 点击 input 打开 树状，
    getTree() {
      this.closeTree = !this.closeTree;
    },
    loadGiftTypeTree(){
      request({
        url: '/gift/gifttype/gettreenode',
        data: {}
      }).then(res => {
        const { data } = res
        this.typeTreeData = data
      })
    },
    loadEntity(){
      if(this.entityId > 0){
        request({ url: '/gift/gift/getgift', data: {id : this.entityId} }).then( res =>{
          this.entity = res.data
          if(this.entity.typeId) {
            this.$refs.typetree.setCurrentKey(this.entity.typeId.toString());
          }
        })
      }
    },
    modelTongBu(){
      this.giftModelVisible=true
    },
    giftSelected(giftObj){
      request({
        url: '/gift/gift/tongbugiftmodel',
        data: {targetgiftid : this.entity.id, sourcegiftid: giftObj.id}
      }).then( res =>{
          if(res.code === "200"){
            this.$message.success(res.msg)
            this.ImageUploadId =  random(1, 100000).toString();
          }else{
            this.$message.error(res.msg);
          }
      })
    },
    onSubmit(){
      this.$refs['giftForm'].validate((valid) => {
        if(valid){
          request({
            url: '/gift/gift/addeidtgift',
            data: this.entity
          }).then( res =>{
            if(res.code === "200"){
              this.$message.success(res.msg)
              this.entityId > 0 ? this.$EventBus.$emit("giftedit", {}):this.$EventBus.$emit("giftadd", {})
              this.entity.id = res.data.id
            }else{
              this.$message.error(res.msg);
            }
          })
        }else{
          console.log('error submit!!');
          return false;
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.giftmodel{
  text-align: center;
  width: 90%;
  margin: 0 auto;
}
</style>
